<!DOCTYPE html>
<html>
<head>
	<title>文章发表</title>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">

	<!-- 所有的 css 资源 -->
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="../../res/sa.css" rel="stylesheet">

	<!-- 所有的 js 资源 -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
	<script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"></script>

	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../res/sa.js"></script>
	<script src="data-list.js"></script>
	<style>

		.c-item .c-label {
			width: 7em;
		}

		/* wang富文本编辑器 */
		.editor-item {
			width: 100%;
			height: auto;
		}

		.editor-item .c-label {
			float: left;
		}

		.editor-item .editor-box {
			float: left;
			width: 80%;
			margin-top: 0px;
			margin-left: 5px;
		}

		.editor-item #editor {
			min-height: 300px;
			background-color: #FFF;
		}

		.editor-item .w-e-toolbar {
			padding-top: 5px !important;
		}

		/* 尽量小点 */
		.editor-item .editor-box {
			float: left;
			width: 700px;
		}

		.editor-item .editor-box img {
			max-width: 200px !important;
		}

	</style>

</head>
<body>

<!-- 防止margin向下击穿 -->
<div style="margin-top: -1em;"><br></div>

<div class="vue-box">

	<!-- 参数栏 -->
	<div class="c-panel">
		<div class="c-title">文章添加</div>
		<el-form id="form" ref="form">

			<br/>
			<div class="c-item" style="width: 100%;">
				<label class="c-label">文章标题：</label>
				<el-input placeholder="例如：2002年的第一场雪" size="mini" style="width: 700px;" v-model="m.title"></el-input>
			</div>

			<br/>
			<div class="c-item editor-item">
				<label class="c-label">文章内容：</label>
				<div class="editor-box">
					<div id="editor">

					</div>
				</div>
			</div>

			<br/>
			<div class="c-item">
				<label class="c-label">公开：</label>
				<el-switch :active-value="1" :inactive-value="2" v-model="m.is_public"></el-switch>
				<span class="c-remark">关闭后，别人将不能看到你的发表</span>
			</div>

			<div style="margin-top: 10px;"></div>
			<div class="c-item">
				<label class="c-label"></label>
				<el-button @click="ok" icon="el-icon-plus" size="mini" type="primary">确定</el-button>
			</div>


		</el-form>
	</div>

	<div class="c-panel" style="background-color: rgba(0,0,0,0);">
		wangEditor：
		<el-link href="http://www.wangeditor.com/" target="_blank" type="primary">
			基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费
		</el-link>
	</div>


</div>

<script>


    // 创建一个空的 m
    function create_m() {
        return {
            title: '江雪',
            content: '<p>千山鸟飞绝，万径人踪灭。</p><p>孤舟蓑笠翁，独钓寒江雪。</p>',
            is_public: 1
        }
    }

    // 创建编辑器
    function create_editor(content) {
        var E = window.wangEditor;
        window.editor = new E('#editor');

        editor.customConfig.menus = [
            'head', 'fontSize', 'fontName', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list',
            'justify', 'quote', 'emoticon', 'image', 'table', 'code', 'undo', 'redo' // 重复
        ];
        editor.customConfig.debug = true; // debug模式
        editor.customConfig.uploadFileName = 'file'; // 图片流name
        editor.customConfig.withCredentials = true; // 跨域携带cookie
        editor.customConfig.uploadImgShowBase64 = true;   	// 使用 base64 保存图片
        editor.create(); // 创建
        editor.txt.html(content);	// 为编辑器赋值
    }


    var app = new Vue({
        el: '.vue-box',
        data: {
            id: sa.$util.getUrlArgs('id', 0),	// 从url中获取传值
            m: create_m(),
        },
        methods: {
            // 提交
            ok: function () {
                // 开始增加或修改
                if (this.id === 0) {
                    sa.post('/url/api', this.m, function (res) {
                        layer.alert('增加成功');
                        this.m = create_m();
                        editor.txt.html("");	// 图文介绍
                    }.bind(this));
                } else {
                    sa.post('/url/api', this.m, function (res) {
                        layer.alert('修改成功', {}, function () {
                            parent.app.f5();
                            parent.layer.closeAll('iframe');
                        }.bind(this));
                    }.bind(this));
                }

            },
        },
        mounted: function () {

            // 如果是添加
            if (this.id === 0) {
                create_editor(this.m.content);		// 创建富文本编辑器
            } else {
                // id 非 0 代表 是要修改
                dataList.forEach(function (item) {
                    if (item.id === this.id) {
                        this.m = item;
                    }
                }.bind(this));
                create_editor(this.m.content);		// 创建富文本编辑器
            }

        }
    })


</script>

</body>
</html>
